<template>
    <div class="header">
        <img src="../../images/1.png" alt="" class="img1">
        <div class="search">
            <!-- <span>JD</span> -->
            <img src="../../images/2.png" alt="" class="img2">
            <p>丨</p>
            <img src="../../images/3.png" alt="" class="img3">
            <input type="text" placeholder="搜索商品/店铺" class="inp">
        </div>
        <button>登录</button>
    </div>
</template>

<script>
export default{
    name:'Header',
    data(){
        return{
            msg:'这是头部！',
        };
    },
};
</script>

<style lang="scss" scoped>
    .header{
        width: 100%;
        line-height: 90px;
        height: 90px;
        background-color: #C82519;
        font-size: 28px;
        position: fixed;
        top:0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 9999;
        .img1{
            width: 50px;
        }
        .search{
            display: flex;
            align-items: center;
            height: 60px;
            width: 550px;
            background-color: white;
            border-radius: 30px;
            .img2{
                width: 50px;
                margin-left: 30px;
                border-radius: 50%;
            }
            p{
                font-size: larger;
                color: gray;
            }
            .img3{
                width: 50px;
                border-radius: 50%;
            }
            .inp{
                border: 0;
                outline: none;
                font-size: 28px;
            }
        }
        button{
            background-color: #C82519;
            color: white;
            border: 0;
            font-size: 28px;
        }
    }
</style>